<template>
  <view class="user-page">
    <view class="user">
     <tui-list-view>
        <!-- 编辑资料的表单 -->
        <view v-if="isEditingProfile" class="edit-profile-form">
          <view class="info-item">
            <label>用户名:</label>
            <input v-model="newUsername" type="text" placeholder="输入新用户名">
          </view>
          <view class="info-item">
            <label>新邮箱:</label>
            <input v-model="newEmail" type="email" placeholder="输入新邮箱">
          </view>
          <view class="info-item">
            <label>新手机号:</label>
            <input v-model="newPhone" type="tel" placeholder="输入新手机号">
          </view>
          <button @click="submitProfileEdit">提交</button>
        </view>
         <tui-list-cell @click="navigateTo('recordPage')">
                  <view class="record">
                    <label>导诊记录</label>
                    <span>></span>
                  </view>
                </tui-list-cell>
                <tui-list-cell @click="navigateTo('notificationPage')">
                  <view class="information">
                    <label>消息通知管理</label>
                    <span>></span>
                  </view>
                </tui-list-cell>
                <tui-list-cell @click="navigateTo('agreementPage')">
                  <view class="agreement">
                    <label>协议与公告</label>
                    <span>></span>
                  </view>
                </tui-list-cell>
      </tui-list-view>
    </view>
    <view class="user-actions">
      <button @click="editProfile">编辑资料</button>
	  <view class="button-gap"></view>
      <button @click="logout">退出登录</button>
    </view>
  </view>
</template>


<script setup>
import { ref } from 'vue';
import { useRouter } from 'vue-router';
import TuiListView from '@/components/thorui-uni/lib/thorui/tui-list-view/tui-list-view.vue';
import TuiListCell from '@/components/thorui-uni/lib/thorui/tui-list-cell/tui-list-cell.vue';

const router = useRouter();
const userInfo = ref({
  username: '张三',
  email: 'zhangsan@example.com',
  phone: '123-4567-8901',
});

const isEditingProfile = ref(false);
const isChangingPassword = ref(false);

const newUsername = ref('');
const newEmail = ref('');
const newPhone = ref('');

function submitProfileEdit() {
  
  userInfo.value.username = newUsername.value;
  userInfo.value.email = newEmail.value;
  userInfo.value.phone = newPhone.value;
  isEditingProfile.value = false;
   uni.showToast({
      title: '资料已更新',
      icon: 'success',
      duration: 2000 
    });
}
function editProfile() {
  isEditingProfile.value = true;
}

function changePassword() {
  isChangingPassword.value = true;
}

function logout() {
  
  userInfo.value = {};
  uni.showToast({
        title: '用户已退出登陆！',
        icon: 'success',
        duration: 2000 
      });
  
 
  my.switchTab({
    url: '/pages/demo/demo' 
  });
}


function navigateTo(pageName) {
  // 根据页面名称导航到相应的路由
  router.push({ name: pageName });
}
</script>

<style scoped>
.user-page {
  padding: 20px;
  background-color: #f4f4f4; 
}

.user-actions {
  margin-top: 20px;
 margin: 20px;
}

.info-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
}

.info-item label {
  font-weight: bold;
  margin-right: 10px;
  flex-grow: 1; 
}

.info-item input {
  flex-grow: 2; 
  padding: 8px;
  border: 1px solid #ccc;
  border-radius: 4px;
}

button {
  padding: 10px 20px;
  margin-right: 10px;
  background-color: #007bff;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  outline: none;
}
.button-gap {
  height: 20px; 
}
button:hover {
  background-color: #0056b3;
}

button:active {
  background-color: #004085;
}

.edit-profile-form,
.change-password-form {
  background-color: white;
  padding: 20px;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
  margin-top: 20px;
}

@media (max-width: 600px) {
  .info-item {
    flex-direction: column;
    align-items: flex-start;
  }

  .info-item label {
    margin-right: 0;
    margin-bottom: 5px;
  }

  .info-item input {
    width: 100%;
  }
}
</style>
